<style>
  .strategy,
  .strategy-form {
    height: 100%;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    font-weight: 400;
    overflow: auto;
  }

  .title {
    height: 60px;
    line-height: 60px;
    font-family: SourceHanSansCN-Medium;
    font-size: 18px;
    color: #000000;
    letter-spacing: 0;
    font-weight: 500;
    padding-left: 16px;
  }

  .strategy-form .layui-form-item {
    margin-bottom: 20px;
  }

  .strategy-form .layui-form-label {
    width: 140px;
    box-sizing: border-box;
    text-align: left;
    padding-left: 26px;
  }

  .required-label {
    position: relative;
  }

  .required-label::before {
    content: '*';
    color: #FA541C;
    position: absolute;
    left: 19px;
  }

  .strategy-form .layui-input-block {
    margin-left: 141px;
  }

  .strategy-form .layui-input {
    width: 600px;
    height: 32px;
  }

  .strategy-form input::placeholder {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.25);
    line-height: 22px;
    font-weight: 400;
  }

  .check-btn {
    width: 120px;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    text-align: center;
    line-height: 30px;
    font-weight: 400;
    margin-right: 8px;
  }

  .check-btn:hover {
    color: #4B6EEF;
    border: 1px solid rgba(75, 110, 239, 1);
  }

  .icon-check {
    display: none;
    width: 11px;
    height: 11px;
    margin-top: -3px;
    margin-left: 5px;
  }

  .active-btn .icon-check {
    display: inline;
  }

  .active-btn {
    color: #4B6EEF;
    border: 1px solid rgba(75, 110, 239, 1);
  }

  .words-table {
    margin-top: 20px;
    border: 1px solid #ebebeb;
    width: 780px;
    color: #2F343E;
  }

  .table-header {
    background: #F3F5FC;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }

  .table-header #add-link {
    color: #4B6EEF;
    display: flex;
    align-items: center;
    cursor: default;
  }

  .add-btn {
    border-color: #4B6EEF;
    background: #4B6EEF;
    color: #FFFFFF;
    width: 24px;
    height: 24px;
    border-radius: 24px;
    line-height: 24px;
    font-weight: bold;
    margin-right: 4px;
  }

  .add-btn:hover {
    border-color: #6383FB;
    background: #6383FB;
    color: #FFFFFF;
  }

  .table-header #add-link .icon {
    width: 24px;
    height: 24px;
    margin-right: 9px;
  }

  .table-content {
    max-height: 192px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .table-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 48px;
    padding-left: 18px;
    padding-right: 13px;
    box-sizing: border-box;
    border-bottom: 1px solid #ebebeb;
  }

  .table-item:last-child {
    border-bottom: none;
  }

  .remove-icon {
    width: 24px;
    height: 24px;
    border-radius: 24px;
    line-height: 24px;
    margin-left: 10px;
    color: #5b5d66;
    border: 1px solid rgb(229, 229, 229);
  }

  .remove-icon:hover {
    border: 1px solid rgba(75, 110, 239, 1);
    color: #4B6EEF;
  }

  /* 文件类型 */
  .select-part {
    display: flex;
    align-items: center;
  }

  .selec-target {
    width: 100px;
    /* height: 32px; */
    margin-left: 10px;
    margin-right: 20px;
  }

  input[type=checkbox] {
    cursor: default;
    position: relative;
    width: 18px;
    height: 18px;
    font-size: 9px;
  }

  input[type=checkbox]::after {
    position: absolute;
    top: 0px;
    color: #fff;
    width: 18px;
    height: 18px;
    display: inline-block;
    visibility: visible;
    padding-left: 0px;
    text-align: center;
    content: '';
    border-radius: 2px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #d9d9d9;
  }

  input[type=checkbox]:hover::after {
    border: 1px solid #4B6EEF;
  }

  input[type=checkbox]:checked::after {
    font-family: "xm-iconfont" !important;
    content: "\e613";
    color: #4B6EEF;
    font-size: 18px;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border: none;
    -webkit-font-smoothing: antialiased;
  }

  input[type=checkbox]:indeterminate::after {
    content: "\FFED";
    color: #ffffff;
    line-height: 18px;
    font-size: 18px;
    width: 18px;
    height: 18px;
    background-color: #4B6EEF;
    border-radius: 4px;
    border: none;
    -webkit-font-smoothing: antialiased;
  }

  .sp-title {
    border-top: 5px solid #f0f0f0;
  }

  .layui-form-onswitch {
    border-color: #4B6EEF;
    background-color: #4B6EEF;
  }

  /* 提交 */
  .submit-part {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
    height: 64px;
    line-height: 64px;
    width: 100%;
    box-sizing: border-box;
    padding-right: 20px;
    text-align: right;
  }

  .submit-btn {
    background: #4B6EEF;
    border-radius: 4px;
    width: 80px;
    height: 32px;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0;
    line-height: 32px;
    font-weight: 400;
    border: none;
    cursor: default;
  }

  .submit-btn:hover {
    background: #6383FB;
  }

  .marquee {
    overflow: hidden;
    cursor: default;
  }

  .marquee .marquee-wrap {
    width: 100%;
  }

  .marquee .marquee-content {
    float: left;
    white-space: nowrap;
    min-width: 100%;
  }

  .marquee .marquee-wrap:hover {
    width: 100%;
    animation: marquee-wrap 20s infinite linear;
  }

  .marquee .marquee-content:hover {
    animation: marquee-content 20s infinite linear;
  }

  @keyframes marquee-wrap {

    0% {
      transform: translateX(0);
    }

    70%,
    100% {
      transform: translateX(100%);
    }
  }

  @keyframes marquee-content {

    0% {
      transform: translateX(0);
    }

    70%,
    100% {
      transform: translateX(-100%);
    }
  }

  /* 弹框 */
  .add-words-dialog .layui-layer-title {
    height: 40px;
    line-height: 40px;
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    color: #FFFFFF;
    font-weight: 400;
    background: #4B6EEF;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  }

  .layui-layer-setwin {
    top: 6px;
    right: 10px;
  }

  .layui-layer-setwin span {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    color: #FFFFFF;
  }

  .layui-layer-setwin span:hover {
    background: #718FFF;
    border-radius: 4px;
  }

  .add-words-dialog .layui-layer-btn0,
  .add-words-dialog .layui-layer-btn1 {
    border-radius: 4px;
    background: #FFFFFF;
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.15);
  }

  .add-words-dialog .layui-layer-btn0 {
    background: #4B6EEF;
    border: 1px solid #4B6EEF;
    color: #FFFFFF;
  }

  .add-words-dialog .layui-layer-btn1:hover {
    color: #4B6EEF;
    border: 1px solid #4B6EEF;
    box-shadow: 0 0 0 2px rgba(75, 110, 239, 0.3);
  }

  .layui-layer-title {
    padding-left: 34px;
    position: relative;
  }

  .layui-layer-title::before {
    content: '';
    width: 18px;
    height: 18px;
    background: url(res/img/dialogIcon.png);
    background-size: cover;
    position: absolute;
    left: 10px;
    top: 10px;
  }
</style>
<script src="res/js/xm-select.js"></script>
<script src="res/js/checkDate.js"></script>
<div class="strategy">
  <form class="layui-form strategy-form" lay-filter="strategyForm">
    <div class="title">文件检查策略</div>
    <div class="layui-form-item">
      <label class="layui-form-label">文件名关键词</label>
      <div class="layui-input-block">
        <input type="text" name="name_check_regs" placeholder="选填，若多个关键词以竖线“｜”分隔" autocomplete="off"
          class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label required-label">文件内容策略</label>
      <div class="layui-input-block">
        <div name="strategy" required lay-verify="required" lay-verType="msg" lay-reqtext="请选择文件内容策略">
          <button class="check-btn" id="bm-btn" type="button" data-type="1">
            标密文件<img src="res/img/checked.png" class="icon-check">
          </button>
          <button class="check-btn" type="button" id="word-btn" data-type="2">
            关键字词条<img src="res/img/checked.png" class="icon-check">
          </button>
        </div>
        <div class="words-table layui-hide">
          <div class="table-header">
            <span>词条配置</span>
            <span id="add-link">
              <div class="btn add-btn"><i class="layui-icon layui-icon-addition"></i></div>
              添加词条
            </span>
          </div>
          <div class="table-content" id="table-item-view"></div>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label required-label">文件类型</label>
      <div class="layui-input-block select-part">
        <div name="fileType" required lay-verify="fileType" lay-verType="msg" lay-reqtext="请选择文件类型"></div>
        <!-- 办公文档 -->
        <input lay-ignore class="doc chk" type="checkbox" name="doc"><span class="selec-target" id="doc"></span>
        <!-- 文本文件 -->
        <input lay-ignore class="txt" type="checkbox" name="txt"><span class="selec-target" id="txt"></span>
        <!-- 图片文件 -->
        <input lay-ignore class="img" type="checkbox" name="img"><span class="selec-target" id="img"></span>
        <!-- 网页文件 -->
        <input lay-ignore class="htmlType" type="checkbox" name="htmlType"><span class="selec-target"
          id="htmlType"></span>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">高级选项</label>
      <div class="layui-input-block" style="display: flex;align-items:center">
        <input lay-ignore type="checkbox" name="is_check_embed_picture" style="margin-right: 7px;">检查文件中的图片
        <input lay-ignore type="checkbox" name="zip" style="margin-left: 15px;margin-right: 7px;"><span title=".rar, .zip, .tar, .7z, .gz, .bz2">检查压缩包中的文件</span>
        <input lay-ignore type="checkbox" name="is_check_usb_file" style="margin-left: 15px;margin-right: 7px;">插入优盘扫描
      </div>
    </div>
    <div class="title sp-title">文件监控策略</div>
    <div class="layui-form-item" style="margin-bottom: 78px;">
      <label class="layui-form-label">文件实时监控</label>
      <div class="layui-input-block">
        <input type="checkbox" name="is_open_watch_file" lay-skin="switch" lay-text="开启|关闭">
      </div>
    </div>
    <div class="submit-part">
      <button class="submit-btn" lay-submit lay-filter="formDemo">保存</button>
    </div>
  </form>
</div>
<script>
  layui.use(function () {
    let form = layui.form
    let $ = layui.$
    let laytpl = layui.laytpl
    let util = layui.util
    var layer = layui.layer

    var device = layui.device() // 设备信息 获取操作系统


    let sendData = {
      is_check_biao_mi: '0',
      send_text_check_regs: false,
      wordsTableData: []

    }
    form.val('strategyForm', {
      'strategy': sendData.strategy //默认值
    })


    // 监听返回数据
    window.addEventListener("setItemEvent", function (e) {
      switch (e.key) {
        case 'MainwtPolicyRes': // 读取策略回复
          formatPolicyData(e.newValue)
          break
        case 'refresh': // 刷新
          getPolicyData()
          break
      }
    })
    // 请求策略
    function getPolicyData() {
      let data = {
        cmd: "MainwtPolicyReq"
      }
      reqPageData(data)
    }
    getPolicyData()

    // 确认checkbox选择 三态
    /**
     * checkedArr 选中值
     * type checkbox类型
     * data 多选checkbox所有值
     * */ 
    function checkCheckboxState (checkedArr, data, type) {
      if (checkedArr.length) {
        if (checkedArr.length < data.length) {
          $("input[name='" + type + "']").prop('indeterminate', true) // 关联checkbox 半选中
        } else {
          $("input[name='" + type + "']").prop('indeterminate', false) // 关联checkbox 半选中
          $("input[name='" + type + "']").prop('checked', true) // 关联checkbox
        }
      } else {
        $("input[name='" + type + "']").prop('indeterminate', false) // 关联checkbox 半选中
        $("input[name='" + type + "']").removeAttr("checked")
      }
    }

    // 多选下拉框
    function prepareXmSelect(title, type, data) {
      return xmSelect.render({
        el: '#' + type,
        language: 'zn',
        tips: title,
        // height: '500px',
        theme: {
          color: '#4B6EEF'
        },
        direction: 'down',
        style: {
          borderRadius: '4px',
          height: '32px',
        },
        model: {
          label: {
            type: 'xxxx', //自定义与下面的对应
            xxxx: {
              template(data, sels) {
                return title
              }
            },
          }
        },
        data: data,
        on: function (checkedData) {
          //arr:  当前多选已选中的数据
          var checkedArr = checkedData.arr;
          checkCheckboxState(checkedArr, data, type)
        },
      })
    }
    var docTypeList = [
      { name: '文档文件（doc/x/m,wps,odt）', value: '.doc~.docx~.wps~.odt', selected: false },
      { name: '表格文件（xls/x/m,et,ods）', value: '.xls~.xlsx~.et~.ods', selected: false },
      { name: '演示文件（ppt/x/m/pps,dps,odp）', value: '.ppt~.pps~.pptx~.dps~.odp', selected: false },
      { name: 'pdf文件（pdf,ceb/x,ofd）', value: '.pdf~.ceb~.ofd', selected: false },
    ]
    var doc = prepareXmSelect('办公文档', 'doc', docTypeList)

    var htmlTypeTypeList = [
      { name: '.htm', value: '.htm', selected: false },
      { name: '.html', value: '.html', selected: false },
      { name: '.mht', value: '.mht', selected: false },
      { name: '.mhtml', value: '.mhtml', selected: false },
      { name: '.xml', value: '.xml', selected: false },
    ]
    var htmlType = prepareXmSelect('网页文件', 'htmlType', htmlTypeTypeList)

    var txtTypeList = [
      { name: '.txt', value: '.txt', selected: false },
      { name: '.rtf', value: '.rtf', selected: false }
    ]
    var txt = prepareXmSelect('文本文件', 'txt', txtTypeList)

    var imgTypeList = [
      { name: '.tif', value: '.tif', selected: false },
      { name: '.tiff', value: '.tiff', selected: false },
      { name: '.jpg', value: '.jpg', selected: false },
      { name: '.jpeg', value: '.jpeg', selected: false },
      { name: '.bmp', value: '.bmp', selected: false },
      { name: '.gif', value: '.gif', selected: false },
      { name: '.png', value: '.png', selected: false },
      { name: '.dib', value: '.dib', selected: false }
    ]
    var img = prepareXmSelect('图片文件', 'img', imgTypeList)

    // 确认勾选
    function unCheck() {
      let arr = ['doc', 'htmlType', 'txt', 'img']
      arr.forEach(item => {
        let className = '.' + item
        $(className).change(function () {
          if ($(this)[0].checked) {
            switch (item) {
              case 'doc':
                doc.setValue(['.doc~.docx~.wps~.odt', '.xls~.xlsx~.et~.ods', '.ppt~.pps~.pptx~.dps~.odp', '.pdf~.ceb~.ofd'])
                break
              case 'htmlType':
                htmlType.setValue(['.htm', '.html', '.mht', '.mhtml', '.xml'])
                break
              case 'txt':
                txt.setValue(['.txt', '.rtf'])
                break
              case 'img':
                img.setValue(['.tif', '.tiff', '.jpg', '.jpeg', '.bmp', '.gif', '.png', '.dib'])
                break
            }
          } else {
            switch (item) {
              case 'doc':
                doc.setValue([])
                break
              case 'htmlType':
                htmlType.setValue([])
                break
              case 'txt':
                txt.setValue([])
                break
              case 'img':
                img.setValue([])
                break
            }
          }
        })
      })
    }
    unCheck()


    // 请求到的数据 对应 页面
    function formatPolicyData(res) {
      res = JSON.parse(res)
      // 文件类型
      if (res.watch_file_types) {
        let docList = []
        if (res.watch_file_types.indexOf('.doc') >= 0) {
          docList.push('.doc~.docx~.wps~.odt')
        }
        if (res.watch_file_types.indexOf('.xls') >= 0) {
          docList.push('.xls~.xlsx~.et~.ods')
        }
        if (res.watch_file_types.indexOf('.ppt') >= 0) {
          docList.push('.ppt~.pps~.pptx~.dps~.odp')
        }
        if (res.watch_file_types.indexOf('.pdf') >= 0) {
          docList.push('.pdf~.ceb~.ofd')
        }
        doc.setValue(docList)
        htmlType.setValue(res.watch_file_types)
        txt.setValue(res.watch_file_types)
        img.setValue(res.watch_file_types)
        // TODO 假设返回内容和以前一样
        if (res.watch_file_types.indexOf('.zip') >= 0) {
          form.val('strategyForm', {
            'zip': true
          })
        }
        setTimeout(() => {
          checkCheckboxState(doc.getValue(), docTypeList, 'doc')
          checkCheckboxState(htmlType.getValue(), htmlTypeTypeList, 'htmlType')
          checkCheckboxState(txt.getValue(), txtTypeList, 'txt')
          checkCheckboxState(img.getValue(), imgTypeList, 'img')
        })
      }

      // 文件内容策略
      sendData.wordsTableData = res.text_check_regs || []
      if (sendData.wordsTableData.length) {
        sendData.send_text_check_regs = true
        $('#word-btn').addClass('active-btn')
        $('.words-table.layui-hide').removeClass('layui-hide')
        renderTable()
      } else {
        sendData.send_text_check_regs = false
        $('#word-btn').removeClass('active-btn')
        $('.words-table').addClass('layui-hide')
      }
      // 标密
      if (res.is_check_biao_mi * 1 === 1) {
        $('#bm-btn').addClass('active-btn')
        sendData.is_check_biao_mi = '1'
        form.val('strategyForm', {
          'strategy': '1'
        })
      } else {
        if (sendData.wordsTableData.length) {
          form.val('strategyForm', {
            'strategy': '0'
          })
        } else {
          form.val('strategyForm', {
            'strategy': null
          })
        }
        $('#bm-btn').removeClass('active-btn')
      }

      // 文件名关键词
      let name_check_regs = res.name_check_regs || []
      form.val('strategyForm', {
        'name_check_regs': name_check_regs.length > 0 ? name_check_regs[0] : '',
        'is_check_embed_picture': res.is_check_embed_picture * 1 === 1,
        'is_check_usb_file': res.is_check_usb_file * 1 === 1,
        'is_open_watch_file': res.is_open_watch_file * 1 === 1
      })

    }

    // 验证 文件类型
    form.verify({
      fileType: function (val, item) {
        if (!doc.getValue('value').length
          && !htmlType.getValue('value').length
          && !txt.getValue('value').length
          && !img.getValue('value').length) {
          return '请选择文件类型'
        }
      }
    })
    //提交
    form.on('submit(formDemo)', function (data) {
      let watch_exts = []
      let docList = []

      doc.getValue('value').forEach(item => {
        docList = docList.concat(item.split('~'))
      })
      watch_exts = [...docList, ...htmlType.getValue('value'), ...txt.getValue('value'), ...img.getValue('value')]
      /* 选择压缩包要传对应的下标 */
      if (form.val('strategyForm').zip === 'on') {
        let zipList = ['.rar', '.zip', '.tar', '.7z', '.gz', '.bz2']
        watch_exts = [...watch_exts, ...zipList]
      }
      // TODO 假设按照原传参方式
      let originData = {
        watch_exts: watch_exts,
        is_chk_bm: sendData.is_check_biao_mi,
        text_regs: sendData.wordsTableData,
        name_regs: form.val('strategyForm').name_check_regs ? [form.val('strategyForm').name_check_regs] : [],
        is_chk_embed_pic: form.val('strategyForm').is_check_embed_picture ? form.val('strategyForm').is_check_embed_picture : '0',
        is_check_usb_file: form.val('strategyForm').is_check_usb_file ? form.val('strategyForm').is_check_usb_file : '0',
        is_open_watch_file: form.val('strategyForm').is_open_watch_file ? form.val('strategyForm').is_open_watch_file : '0',
        ver: 'local_' + util.toDateString(getDate(), 'yyyyMMddHHmmss'),
        ret: '0',
        one_sum_len: '100'
      }
      if (!sendData.send_text_check_regs) {
        originData.text_regs = []
      }
      /* 处理单项选择框内容 */
      for (const key in originData) {
        let element = originData[key];
        if (element === 'on') {
          originData[key] = '1'
        }
      }
      let reqData = {
        cmd: 'res_mg_policy',
        body: originData
      }
      reqPageData(reqData)
      return false;
    });
    // 标密文件
    $('#bm-btn').click(function () {
      $(this).toggleClass('active-btn')
      sendData.is_check_biao_mi = sendData.is_check_biao_mi === '1' ? '0' : '1'
      if (sendData.is_check_biao_mi === '1') {
        form.val('strategyForm', {
          'strategy': '1'
        })
        // 关键字词条 根据词条数量判断
      } else if (sendData.wordsTableData.length) {
        form.val('strategyForm', {
          'strategy': '0'
        })
      } else {
        form.val('strategyForm', {
          'strategy': null
        })
      }
    })
    // 关键字词条
    $('#word-btn').click(function () {
      $(this).toggleClass('active-btn')
      sendData.send_text_check_regs = !sendData.send_text_check_regs
      if (sendData.send_text_check_regs) {
        $('.words-table.layui-hide').removeClass('layui-hide')
      } else {
        $('.words-table').addClass('layui-hide')
      }
    })


    function renderTable() {
      // 表格渲染
      var getTpl = tableItemTpl.innerHTML
      var view = document.getElementById('table-item-view');
      laytpl(getTpl).render(sendData.wordsTableData, function (html) {
        view.innerHTML = html;
      });
    }
    renderTable()

    // 删除 某项 词条配置
    util.event('remove-event', {
      removeItem: function (param) {
        sendData.wordsTableData.splice(param[0].dataset.item, 1)
        checkKeyWords()
        renderTable()
      }
    })

    // 词条弹框
    $('#add-link').click(function () {
      layer.open({
        type: 2,
        resize: false,
        move: false,
        title: '添加词条',
        area: ['800px', '508px'],
        btn: ['确定', '取消'],
        yes: function (index, layero) {
          let arr = $('#layui-layer-iframe' + index).contents().find('input')
          let mainInput = $('#layui-layer-iframe' + index).contents().find('#main-input').val()
          if (!mainInput) {
            layer.msg('您还未输入关键词词条，请输入词条后保存')
            return false
          }
          let wordItem = []
          for (let i = 0; i < arr.length; i++) {
            let item = arr[i]
            if (item.value) {
              wordItem.push(item.value)
            }
          }
          sendData.wordsTableData.push(wordItem.join('+'))
          checkKeyWords()
          renderTable()

          layer.closeAll()
        },
        skin: 'add-words-dialog',
        content: 'addWords.html?no=' + (sendData.wordsTableData.length + 1)
      });
    })

    function checkKeyWords() {
      if (sendData.is_check_biao_mi === '1') {
        form.val('strategyForm', {
          'strategy': '1'
        })
        // 关键字词条 根据词条数量判断
      } else if (sendData.wordsTableData.length) {
        form.val('strategyForm', {
          'strategy': '0'
        })
      } else {
        form.val('strategyForm', {
          'strategy': null
        })
      }
    }
    form.render();
  });

</script>
<!-- 词条配置 -->
<script id="tableItemTpl" type="text/html">
  {{#  layui.each(d, function(index, item){ }}
    <div class="table-item">
      <div class="marquee">
        <div class="marquee-wrap">
          <div class="marquee-content ">
            词条{{index+1}}：{{item}}
          </div>
        </div>
      </div>
      <div data-item="{{index}}" remove-event="removeItem" class="remove-icon btn close-btn"><i class="layui-icon layui-icon-close"></i></div>
    </div>
  {{#  }); }}
</script>